import { designComponent } from "src/use/designComponent";
import useModel from "src/use/useModel";

export const DemoUseModelComponent = designComponent({
  props: {
    modelValue: {},
    start: {},
    end: {},
    range: Boolean
  },
  emits: {
    updateModelValue: (val: any) => true,
    updateStart: (val: any) => true,
    updateEnd: (val: any) => true
  },
  setup({ props, event: { emit } }) {
    const modelValue = useModel(() => props.modelValue, emit.updateModelValue);
    const start = useModel(() => props.start, emit.updateStart);
    const end = useModel(() => props.end, emit.updateEnd);

    return {
      render: () => (
        <div class="demo-use-model-component">
          {!props.range ? (
            <div>
              <input type="text" v-model={modelValue.value} />
              <button onClick={() => (modelValue.value = "ccc")}>change</button>
            </div>
          ) : (
            <div>
              <input type="number" v-model={start.value} /> -{" "}
              <input type="number" v-model={end.value} />
            </div>
          )}
        </div>
      )
    };
  }
});
